<template>
  <section class="page dashboard admin">
    <el-row :gutter="10" class="admin-page-container">
      <el-col :span="24">
        <case-overview-component :menuType="'admin'"></case-overview-component>
      </el-col>
      <el-col :span="12" class="min-inline-item">
        <wait-case-chart :isReturnCase="false"></wait-case-chart>
      </el-col>

      <el-col :span="12" class="min-inline-item">
        <wait-case-chart :isReturnCase="true"></wait-case-chart>
      </el-col>

      <el-col :span="24">
        <case-repay-chart></case-repay-chart>
      </el-col>
    </el-row>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import AdminModule from "~/components/dashboard/admin/index"

@Layout("workspace")
@Component({
  components: {
    ...AdminModule
  }
})
export default class Admin extends Vue { }
</script>

<style lang="less" scoped>
.page.dashboard.admin {
  // padding-left: 20px;
  // overflow-y: auto;
  .admin-page-container {
    margin: 0 !important;
    .el-col {
      padding-bottom: 20px;
      border: solid 3px #f2f2f2;
    }
  }
  .min-inline-item {
    height: 500px;
  }
}
</style>
<style lang="less">
.page.dashboard.admin {
  .data-box {
    padding: 0 3px;
  }
}
</style>